const socket = io();//与服务器建立了连接
//用qs cdn来获得url中传递的字符
const params = Qs.parse(location.search, { ignoreQueryPrefix: true });
const name = params.name;
const room = params.room;

//使界面始终保持在最后一条消息处
const scroll = function () {
    const rightPanel = document.querySelector(".right-panel");
    const messageContainer = document.querySelector(".message-container")
    rightPanel.scrollTop = messageContainer.scrollHeight;
}

document.querySelector(".room-name").innerHTML = room;


//服务器端emit发送  前端接收on
//类似于前端向后端发送数据 后端向前端发送数据

//设置我自己加入聊天室也会出现欢迎语句
socket.on('sysMessage', message => {
    document.querySelector('.message-container').innerHTML = `
        <div class="card text-center">
            <div class="card-body">
                ${message}
            </div>
        </div>
    `;
    console.log(message);
})
//将房间信息和姓名发送给后端
socket.emit('joinRoom', { name, room });

socket.on('roomUsers', userList => {
    //返回的是当前房间的用户
    const userListEl = document.querySelector('.user-list');
    while (userListEl.childNodes.length > 3) {
        userListEl.removeChild(userListEl.lastChild);
    }

    let listHtml = "";
    userList.map(user => {
        listHtml += `<li class="list-group-item">${user.name}</li>`
    })

    userListEl.innerHTML += listHtml;
});


//将输入框输入的信息发送到别人的页面上
document.getElementById('chat-form').addEventListener('submit', e => {
    e.preventDefault();//阻止默认提交

    const msgEl = document.getElementById('msg');

    if (!msgEl.value) {
        alert("请输入正确的消息");
        return;
    }
    socket.emit('chatMessage', { name, content: msgEl.value });
    msgEl.value = "";
})





//接收后端传来的数据  一来一回 别人发送的数据经过后端又传送了过来 实现了实时沟通  两个窗口是实时的
socket.on('chatMessage', message => {
    const isMine = message.name === name;
    document.querySelector('.message-container').innerHTML += `
        <div class="d-flex ${isMine ? 'justify-content-end' : 'justify-content-start'} my-3">
             <div class="card w-25 ${isMine ? 'text-light bg-success' : ''}">
                    <div class="card-body">
                      <div class="card-title">${isMine ? '我' : message.name}</div>
                      <div class="card-text">${message.content}</div>
                      <div></div>
                    </div>
            </div>
         </div>
    `
    scroll();
})


//任务 在聊天界面中间显示 欢迎name加入聊天室
//把房间列表显示出来 并以高亮显示出当前所在的房间